<style>

    /** 消息列表样式 */
    .message-list {
        overflow: auto;
    }

    .message-list-item {
        padding: 10px 24px;
        border-bottom: 1px solid #e8e8e8;
        -ms-flex-align: start;
        align-items: flex-start;
        display: flex;
        -ms-flex: 1 1;
        flex: 1 1;
    }

    .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
        background: #F2F2F2;
    }

    .message-item-icon {
        width: 40px;
        height: 40px;
        margin-right: 16px;
        display: block;
        margin-top: 4px;
    }

    .message-item-right {
        display: block;
        flex: 1 0;
        line-height: 24px;
    }

    .message-item-title {
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
    }

    .message-item-text {
        color: rgba(0, 0, 0, .45);
        font-size: 12px;
    }

    .message-btn-clear, .message-btn-more {
        display: block;
        padding: 10px 5px;
        text-align: center;
        line-height: 24px;
        color: #333;
    }

    .message-btn-clear {
        background: white;
        border-top: 1px solid #e8e8e8;
    }

    .message-btn-more {
        color: #666;
        font-size: 13px;
    }

    .message-list-empty {
        text-align: center;
        color: rgba(0, 0, 0, .45);
        padding: 73px 0 88px;
    }

    .message-list-empty img {
        height: 76px;
        margin-bottom: 16px;
    }

    /** //消息列表样式结束 */
</style>

<div class="layui-tab layui-tab-brief" style="padding: 5px 0 0 0;margin: 0;">
    <script id="messageView" type="text/html">

        <ul class="layui-tab-title" style="text-align: center;">
            <li class="layui-this">通知({{d.notices.length}})</li>
            <li>私信({{d.messages.length}})</li>
            <li>待办({{d.schedules.length}})</li>
        </ul>

        <div class="layui-tab-content" style="padding: 5px 0 0 0;">

            <div class="layui-tab-item layui-show">

                <div class="message-list">

                    {{# layui.each(d.notices, function(index, item){ }}
                    <a class="message-list-item" href="javascript:;">
                        <img class="message-item-icon" src="{{item.icon}}">
                        <div class="message-item-right">
                            <h2 class="message-item-title">{{item.title}}</h2>
                            <p class="message-item-text">{{item.time}}</p>
                        </div>
                    </a>
                    {{# }); }}

                    <!-- 列表为空 -->
                    <div class="message-list-empty" style="display: none;">
                        <img src="assets/images/img_msg_notice.svg">
                        <div>没有通知</div>
                    </div>

                </div>

                <a class="message-btn-clear" href="javascript:;">全部标记已读</a>

            </div>

            <div class="layui-tab-item">

                <div class="message-list">

                    {{# layui.each(d.messages, function(index, item){ }}
                    <a class="message-list-item" href="javascript:;">
                        <img class="message-item-icon" src="{{item.icon}}">
                        <div class="message-item-right">
                            <h2 class="message-item-title">{{item.title}}</h2>
                            <p class="message-item-text">{{item.content}}</p>
                            <p class="message-item-text">{{item.time}}</p>
                        </div>
                    </a>
                    {{# }); }}

                    <a id="btn-more1" class="message-btn-more" href="javascript:;">加载更多</a>

                    <!-- 列表为空 -->
                    <div class="message-list-empty" style="display: none;">
                        <img src="assets/images/img_msg_pri.svg">
                        <div>没有消息</div>
                    </div>

                </div>

                <a class="message-btn-clear" href="javascript:;">清空消息</a>

            </div>

            <div class="layui-tab-item">

                <div class="message-list">

                    {{# layui.each(d.schedules, function(index, item){ }}
                    <a class="message-list-item" href="javascript:;">
                        <div class="message-item-right">
                            {{# if(item.state==1){ }}
                            <span class="layui-badge pull-right">待完成</span>
                            {{# } }}
                            {{# if(item.state==2){ }}
                            <span class="layui-badge layui-bg-gray pull-right">已完成</span>
                            {{# } }}
                            <h2 class="message-item-title">{{item.title}}</h2>
                            <p class="message-item-text">{{item.time}}</p>
                        </div>
                    </a>
                    {{# }); }}

                    <!-- 列表为空 -->
                    <div class="message-list-empty" style="display: none;">
                        <img src="assets/images/img_msg_db.svg">
                        <div>没有待办</div>
                    </div>

                </div>

                <a class="message-btn-clear" href="javascript:;">清空待办</a>

            </div>
        </div>
    </script>
</div>

<script>
    var dataList = {
        notices: [{
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }, {
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }],
        messages: [{
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }, {
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }],
        schedules: [{
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 1
        }, {
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 2
        }]
    };

    layui.use(['element', 'laytpl'], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var laytpl = layui.laytpl;

        // 渲染消息列表
        laytpl(messageView.innerHTML).render(dataList, function (html) {
            $('#messageView').after(html);
        });

        // 加载更多按钮点击事件
        $('#btn-more1').click(function () {
            var $that = $(this);
            var str = $that.prev()[0].outerHTML;
            for (var i = 0; i < 5; i++) {
                $that.before(str);
            }
        });

        // 清空消息点击事件
        $('.message-btn-clear').click(function () {
            $(this).css('display', 'none');
            $(this).prev().find('.message-list-item').remove();
            $(this).prev().find('.message-btn-more').remove();
            $(this).prev().find('.message-list-empty').css('display', 'block');
        });

        // 调整列表的高度(减去弹窗top、选项卡标题高度、清空按钮高度)
        var mdh = (document.documentElement.clientHeight || document.body.clientHeight) - 50 - 50 - 50;
        $('.message-list').height(mdh);
    });
</script>